import React, { Component, ComponentClass } from 'react';
import Taro from '@tarojs/taro';
import {View, Image} from '@tarojs/components'
import {vcmonitor} from "../../utils/tools";
import {http} from '../../utils/http'
import {SUPPLIER_DETAIL} from "../../constants/api";
import './index.scss';

type StateProps = {
  detail: any
  fileList: any
}

class productList extends Component {
  state: StateProps = {
    detail: {},
    fileList: []
  }

  async UNSAFE_componentWillMount() {
    vcmonitor(this)
  }

  async componentDidMount() {
    let { fileList } = this.state
    const query: any = Taro.getCurrentInstance().router.params;
    const supplierId = query.id;
    Taro.showLoading({title: '加载中...'});
    const res = await http.HGet(SUPPLIER_DETAIL, {
      type: 'move',
      supplierId
    });
    res.data.checkerList = res.data.checker_group_snapshoot && JSON.parse(res.data.checker_group_snapshoot) || {};
    res.data.Stores_information.map(item => {
      if (item.qualifications_imgs) {
        item.qualifications_imgs = JSON.parse(item.qualifications_imgs)
        const images = []
        item.qualifications_imgs.map(item => images.push(item.url))
        item.qualifications_images = images
      }
      const start = item.business_time_start
      const end = item.business_time_end
      if (start) {
        item.business_time_start = start.split('.')[0].substr(0,5)
      }
      if (end) {
        item.business_time_end = end.split('.')[0].substr(0,5)
      }
      if (res.data.b_scanning && res.data.b_scanning.indexOf(',') > -1) {
        fileList = res.data.b_scanning.split(',')
      } else if (res.data.b_scanning) {
        fileList = [res.data.b_scanning]
      } else {
        fileList = []
      }
    })
    this.setState({
      detail: res.data,
      fileList
    });
    Taro.hideLoading();
  }

  // 关闭筛选
  setDrawer(drawerShow) {
    this.setState({
      drawerShow
    });
  }

  previewImage(url) {
    Taro.previewImage({
      urls: [url]
    })
  }

  previewImages(current, urls) {
    Taro.previewImage({
      current,
      urls
    })
  }

  getSettlementPeriod(settlementPeriod) {
    if (!settlementPeriod) {
      return '一单一结'
    } else if (settlementPeriod == 1) {
      return '日结'
    } else if (settlementPeriod == 2) {
      return '周结'
    } else if (settlementPeriod == 3) {
      return '月结'
    } else if (settlementPeriod == 4) {
      return '季结'
    } else if (settlementPeriod == 5) {
      return '半年结'
    } else if (settlementPeriod == 6) {
      return '年结'
    }
  }

  render() {
    const {detail, detail: {storeList}, fileList} = this.state;
    const dataColor = Taro.getStorageSync('colorData');
    return (
      <View className='buslnessDetail-detail'>
        <View className='buslnessDetail-detail-item-wrap'>
          <View className='buslnessDetail-detail-item'>
            <View className='buslnessDetail-detail-item-right'>
              {detail.process_status == null ? '' : detail.process_status}
            </View>
            <View className='buslnessDetail-detail-item-name'>{detail.company}</View>
            <View className='buslnessDetail-detail-item-content'>
              商家联系人：{detail.linkman}
            </View>
            <View className='buslnessDetail-detail-item-content'>
              商家账号：{detail.username}
            </View>
            <View className='buslnessDetail-detail-item-content'>
              创建时间：{detail.add_date}
            </View>
            <View className='buslnessDetail-detail-item-content'>
              联系人手机号：{detail.mobile}
            </View>
            {/* <View className='buslnessDetail-detail-item-content'>
              营业时间：{detail.open_time}
            </View> */}
            <View className='buslnessDetail-detail-item-content'>
              结算周期：{this.getSettlementPeriod(detail.settlement_period)}
            </View>
            <View className='buslnessDetail-detail-item-content b-b'>
              营业执照：
              {fileList.map((item, index) =>
                <Image
                  key={index}
                  style='vertical-align: top;width: 100px;height: 100px;background: #fff;'
                  src={item}
                  onClick={() => this.previewImage(item)}
                />
              )}
            </View>
          </View>
          <View className='buslnessDetail-detail-item'>
            <View className='buslnessDetail-detail-item-title'>财务信息</View>
            <View className='buslnessDetail-detail-item-content'>
              账户信息：{detail.finance_message}
            </View>
            <View className='buslnessDetail-detail-item-content'>
              账户名称：{detail.finance_account_title}
            </View>
            <View className='buslnessDetail-detail-item-content'>
              收款账号：{detail.finance_account_number}
            </View>
            <View className='buslnessDetail-detail-item-content'>
              开户行：{detail.finance_opening_bank}
            </View>
          </View>
          <View className='buslnessDetail-detail-item'>
            {detail.Stores_information && detail.Stores_information.length > 0 &&
            <View className='buslnessDetail-detail-item-title'>门店信息</View>}
            {
              detail.Stores_information && detail.Stores_information.map((item, index) => {
                return (
                  <View key={index}>
                    <View className='buslnessDetail-detail-item-content'>
                      门店名称：{item.name && item.name || ''}
                    </View>
                    {item.business_time_start && <View className='buslnessDetail-detail-item-content'>
                      营业时间：{item.business_time_start}{item.business_time_end ? '-' + item.business_time_end : ''}
                    </View>}
                    <View className='buslnessDetail-detail-item-content'>
                      地图标注：{item.longitude_and_latitude == 'undefined, undefined' || item.longitude_and_latitude == null ? '' : item.longitude_and_latitude}
                    </View>
                    <View className='buslnessDetail-detail-item-content'>
                      门店地址：{item.address && item.address || ''}
                    </View>
                    <View className='buslnessDetail-detail-item-content'>
                      客服电话：{item.phone && item.phone || ''}
                    </View>
                    <View
                      className={`buslnessDetail-detail-item-content ${index == storeList && storeList.length - 1 ? 'p-b-40' : 'b-b m-b-30'}`}
                    >
                      门店照片：
                      <Image
                        style='vertical-align: top;width: 100px;height: 100px;background: #fff;'
                        src={item.photo}
                        onClick={() => this.previewImage(item.photo)}
                      />
                    </View>
                    {item.qualifications_imgs && item.qualifications_imgs.length > 0 && <View
                      className={`buslnessDetail-detail-item-content ${index == storeList && storeList.length - 1 ? 'p-b-40' : 'b-b m-b-30'}`}
                    >
                      资质图片：
                      {item.qualifications_imgs.map((items, index) => <Image key={index}
                        style='vertical-align: top;width: 100px;height: 100px;background: #fff;margin-right: 4px;'
                        src={items.url}
                        onClick={() => this.previewImages(items.url, item.qualifications_images)}
                      />)}
                    </View>}
                  </View>
                )
              })
            }
          </View>
        </View>
      </View>
    )
  }
}

export default productList as ComponentClass;
